<template>
  <div class="user-info-container">
    <h2>个人信息</h2>
    <div class="user-info-content">
      <el-form :model="userInfo" label-width="120px" v-if="!isEditing">
        <el-form-item label="用户名:">
          <span>{{ userInfo.username }}</span>
        </el-form-item>
        <el-form-item label="角色:">
          <span>{{ userInfo.role === 'student' ? '学生' : '教师' }}</span>
        </el-form-item>
        <el-form-item label="手机号:">
          <span>{{ userInfo.phone }}</span>
        </el-form-item>
        <el-form-item label="邮箱:">
          <span>{{ userInfo.email }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editInfo">编辑信息</el-button>
          <el-button type="warning" @click="changePassword">修改密码</el-button>
        </el-form-item>
      </el-form>

      <el-form :model="userInfo" label-width="120px" v-if="isEditing" ref="editForm">
        <el-form-item label="用户名:">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色:">
          <el-select v-model="userInfo.role" disabled>
            <el-option label="学生" value="student"></el-option>
            <el-option label="教师" value="teacher"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="userInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveInfo">保存</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>

      <el-dialog title="修改密码" v-model="pwdDialogVisible" width="30%">
        <el-form :model="passwordForm" ref="pwdForm">
          <el-form-item label="旧密码:" label-width="100px">
            <el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码:" label-width="100px">
            <el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" label-width="100px">
            <el-input type="password" v-model="passwordForm.confirmPassword" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="pwdDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePassword">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {
        username: '',
        role: 'student',
        phone: '',
        email: ''
      },
      isEditing: false,
      pwdDialogVisible: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  mounted() {
    this.fetchUserInfo()
  },
  methods: {
    async fetchUserInfo() {
      try {
        // 模拟获取用户信息
        const user = JSON.parse(localStorage.getItem('user')) || {}
        this.userInfo = {
          username: user.username || '',
          role: user.role || 'student',
          phone: user.phone || '',
          email: user.email || ''
        }
      } catch (error) {
        this.$message.error('获取用户信息失败')
      }
    },
    editInfo() {
      this.isEditing = true
    },
    cancelEdit() {
      this.isEditing = false
      this.fetchUserInfo()
    },
    async saveInfo() {
      try {
        // 模拟保存用户信息
        const user = JSON.parse(localStorage.getItem('user')) || {}
        Object.assign(user, this.userInfo)
        localStorage.setItem('user', JSON.stringify(user))
        
        this.isEditing = false
        this.$message.success('信息保存成功')
      } catch (error) {
        this.$message.error('保存失败')
      }
    },
    changePassword() {
      this.pwdDialogVisible = true
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    },
    async savePassword() {
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error('两次输入的新密码不一致')
        return
      }
      
      try {
        // 模拟修改密码
        this.pwdDialogVisible = false
        this.$message.success('密码修改成功')
      } catch (error) {
        this.$message.error('密码修改失败')
      }
    }
  }
}
</script>

<style scoped>
.user-info-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.user-info-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>